<template>
	<view>
		<view class="head" v-if="!showEdit">
			<view class="left">
				<image :src="info.avatarUrl" class="avatar"></image>
				<view class="name">{{info.nickName}}</view>
			</view>
			<view class="right" @click="showIt">
				<image src="../../static/images/icon/icon-edit.png" class="right-i"></image>
				<text>修改</text>
			</view>
		</view>
		<view class="head" v-else>
			<view class="left">
				<view class="btn-box">
					<button class="head-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image v-if="avatarUrl" class="avatar" :src="avatarUrl"></image>
						<image v-else src="../../static/images/icon/icon-xuan.png" class="avatar"></image>
					</button>
				</view>
				<view class="head-inp">
					<input type="nickname" @change="change" maxlength="6" class="name" placeholder="请输入昵称" />
					<!-- <input v-model="nickName" maxlength="6" class="name" placeholder="请输入昵称" /> -->
				</view>
			</view>
			<view class="right" @click="save">
				<image src="../../static/images/icon/icon-save.png" class="right-i"></image>
				<text>保存</text>
			</view>
		</view>
		<view class="item">
			<view class="title">用户uid：</view>
			<view class="text">{{info.uid}}</view>
		</view>
		<view class="item">
			<view class="title">用户等级：</view>
			<view class="text" v-if="info.role==1">普通用户</view>
			<view class="text" v-if="info.role==2">会员</view>
			<view class="text" v-if="info.role==3">管理员</view>
		</view>
		<view class="box">
			<view class="btn">
				<view class="submit" @click="getKey">查看key</view>
				<view v-if="str">
					<view class="str-box">{{str}}</view>
					<view class="submit" @click="copy">复制</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: null,
				avatarUrl: "",
				nickName: "",
				showEdit: false,
				str: ""
			}
		},
		computed: {},
		watch: {},
		methods: {
			getInfo() {
				let info = uni.getStorageSync('userInfo')
				this.info = info
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
			},
			change(e) {
				let name = e.detail.value
				this.nickName = name
			},
			showIt() {
				this.showEdit = true
			},
			async save() {
				let obj = {}
				if (this.nickName) {
					obj.nickName = this.nickName
					this.info.nickName = obj.nickName
				}
				// console.log(obj)
				// return
				if (this.avatarUrl) {
					let res = await wx.cloud.uploadFile({
						cloudPath: 'avatar/' + 'userAvatar' + this.info.uid + '.png',
						filePath: this.avatarUrl, // 文件路径
					})

					obj.avatarUrl = res.fileID
					this.info.avatarUrl = res.fileID
				}

				let _id = this.info._id
				console.log(obj)
				// return
				if (this.nickName || this.avatarUrl) {
					const db = wx.cloud.database()
					const info = await db.collection('user').doc(_id).update({
						data: obj
					})
					console.log(info)
					uni.setStorageSync('userInfo', this.info)
					uni.showToast({
						title: "成功"
					})
					this.showEdit = false
				} else {
					this.showEdit = false
				}
			},
			getKey() {
				if(uni.getStorageSync('key')){
					this.str = uni.getStorageSync('key')
					return
				}
				wx.cloud.callFunction({
					name: 'getkey',
				}).then(res => {
					console.log(res.result.data)
					let str = res.result.data.str
					this.str = str
					uni.setStorageSync('key', str)
				})
			},
			copy() {
				console.log(this.str);
				wx.setClipboardData({ //复制文本
					data: this.str,
					success: function(res) {
						wx.getClipboardData({ //获取复制文本
							success: function(res) {
								uni.showToast({
									title: "成功"
								})
							}
						})
					}
				})
			},
		},
		onLoad(options) {
			this.getInfo()
		},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	button {
		display: block;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		overflow: hidden;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.head {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			height: 160rpx;

			.head-btn {
				// background-color: red;
			}

			.head-inp {
				// background-color: yellow;
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.name {
				margin-left: 20rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			margin-right: 30rpx;

			.right-i {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}
	}

	.item {
		display: flex;
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;

		.title {
			margin-left: 30rpx;
		}

		.text {}
	}

	.box {
		.btn {
			margin-top: 10rpx;
			background-color: #fff;
			padding-top: 30rpx;
			padding-bottom: 80rpx;

			.submit {
				margin: 0 auto;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(#00AEEC, #1296db);
				color: #fff;
				border-radius: 20rpx;
			}

			.str-box {
				width: 600rpx;
				height: 60rpx;
				border: 1rpx solid #ccc;
				margin: 20rpx auto;
			}
		}
	}
</style>
